<template>
	<!-- 店铺详情 -->
	<view class="shop">
		<view class="nav_tab" :style="{ paddingTop: `${statusHeight}px` }">
			<view class="search_back" slot="left"><uni-icons type="arrowleft" size="22"></uni-icons></view>
			<view class="nav_tab_icon">
				<uni-icons type="search" class="search_icon" size="18" color="#fff"></uni-icons>
				<uni-icons type="star" class="search_icon" size="18" color="#fff"></uni-icons>
				<uni-icons type="chat" class="search_icon" size="18" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="shop_body">
			<view class="shop_con_shopdeils">
				<view class="con_shopdeils">
					<view class="con_shopdeils_box">
						<view class="con_deils_img"><image :src="deils.icon" mode=""></image></view>
						<view class="con_deils_shopname">
							<text>{{ deils.yfname }}</text>
							<text class="con_address_text">({{ deils.address }})</text>
							<view class="">
								<text class="shop_text">约{{ deils.time }}分钟</text>
								<text class="shop_text">·</text>
								<text class="shop_text">月售{{ deils.moushuo }}</text>
								<text class="shop_text">·</text>
								<text class="shop_text">可自取</text>
							</view>
						</view>
					</view>
					<view class="shop_tag">
						<view class="tag_box">
							<view :class="[tagSty == item.id ? 'tag_sty tag_text' : 'tag_text']" v-for="(item, index) in tag" :key="index" @click="tagClick(item.id)">
								{{ item.tags }}
							</view>
						</view>
					</view>
					<view class="shop_banner" v-if="tagSty == 0">
						<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
							<swiper-item v-for="(item, index) in bannerlist" :key="index">
								<view class="swiper-item">{{ item.text }}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- 占位盒子 -->
			<view class="seize_box"></view>
			<view class="shop_contion" v-if="tagSty == 0">
				<!-- 商家展位盒子 -->
				<view class="shop_station"></view>
				<view class="shop_scroll">
					<scroll-view scroll-y="true" style="height:37vh;" class="scroll_title">
						<ul>
							<li v-for="(item, index) in shopCation" :key="index" :class="[shopCationSty == item.id ? 'li_sty' : '']" @click="tapShopCation(item)">
								<view :class="[shopCationSty == item.id ? 'scroll_li_text li_text_sty' : 'scroll_li_text']">
									<text>{{ item.text }}</text>
								</view>
							</li>
						</ul>
					</scroll-view>

					<view class="shop_scroll_con">
						<view class="scrool_con_title">
							<text>销量</text>
							<text>价格</text>
						</view>
						<scroll-view scroll-y="true" class="scroll_text_con" style="height:28vh;">
							<view class="scroll_con_box" v-for="(item, index) in cationList" :key="index">
								<view class="con_box_img"><image :src="item.icon" mode=""></image></view>
								<view class="con_box_content">
									<view class="con_box_content_shopname">
										<text class="uni-lastmsg">{{ item.text }}</text>
									</view>
									<view class="con_box_content_deils">
										<view class="content_deils_left">
											<view class="content_deils_left_text">
												<text class="bot_text">月售{{ item.moushuo }}</text>
												<text class="bot_text">好评{{ item.goodp }}</text>
											</view>
											<view class="content_bot_pic">
												<text class="pic_icon">￥</text>
												<text class="content_bot_nowpic">{{ item.pic }}</text>
												<uni-tag :text="item.yuanj" type="default" inverted="true" disabled="true">￥</uni-tag>
											</view>
										</view>
										<view class="add_icon" @click="addShopCart(item)"><image src="../../static/add.png" mode=""></image></view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="shop_cart" @click="openPopup">
					<view class="shop_cart_left">
						<view class="shop_crat_icon"></view>
						<view class="shop_crat_text">
							<text>未选购商品</text>
							<text>{{ Math.round(shopSum * 100) / 100 }}</text>
						</view>
					</view>
					<view class="shop_cart_btn"><button type="primary">结算</button></view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="shop_evealuate" v-if="tagSty == 1">
				<view class="shop_evealuate">
					<view class="evealuate_top">
						<view class="evealuate_fraction"><text>4.9</text></view>
						<view class="evealuate_icon">
							<p>商家评分</p>
							<uni-rate :readonly="true" :value="4.5" :size="14" activeColor="#ff5f42" />
						</view>
					</view>
					<view class="evealuate_tag">
						<uni-tag
							:text="item.text"
							:type="evealSty == index ? 'success' : 'default'"
							v-for="(item, index) in eveaTaglist"
							:key="index"
							@click="evealClick(index)"
						></uni-tag>
					</view>
					<view class="evealuate_con" v-for="(item, index) in evealist" :key="index">
						<view class="eveal_con_top">
							<view class="eveal_con">
								<view class="eveal_headImg"><image :src="item.headport" mode=""></image></view>
								<view class="eveal_con_text">
									<view class="">
										<text>{{ item.phone }}</text>
									</view>
									<uni-rate :readonly="true" :value="4.5" :size="14" activeColor="#ff5f42" />
								</view>
							</view>
							<view class="eveal_time">
								<text>{{ item.time }}</text>
							</view>
						</view>
						<view class="evealuate_con_cotion">
							<text>{{ item.eveal }}</text>
						</view>
						<view class="evealuate_img_box">
							<scroll-view scroll-x="true">
								<view class="" style="display: flex;">
									<view class="img_box" v-for="(item, index) in item.evealimglist" :key="index"><image :src="item.evealimg" mode=""></image></view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<!-- 店家 -->
			<view class="shop_shopkeeper" v-if="tagSty == 2">
				<view class="shopkeeper">
					<view class="shopkeep_head"><text>门店信息</text></view>
					<view class="shopkeepSty">
						<text>店铺评分</text>
						<text class="keepTextSty">:</text>
						<text>4.9</text>
					</view>
					<view class="shopkeepSty">
						<text>商品数量</text>
						<text class="keepTextSty">:</text>
						<text>3405件</text>
					</view>
					<view class="shopkeepSty">
						<text>月销单量</text>
						<text class="keepTextSty">:</text>
						<text>100</text>
					</view>
					<view class="shopkeepSty">
						<text>营业时间</text>
						<text class="keepTextSty">:</text>
						<text>8:00-23:00</text>
					</view>
					<view class="shopkeepSty" style="display: flex;">
						<text style="margin-right: 27px;">地</text>
						<text>址</text>
						<text class="keepTextSty">:</text>
						<view style="display: flex;align-items: center;">
							<view class="" style="margin-right: 20rpx;">
								<text>{{ shopKeepObj.address }}</text>
							</view>
							<view class="" @click="copy(shopKeepObj.address)"><uni-icons type="chatboxes"></uni-icons></view>
						</view>
					</view>
					<view class="shopkeepSty">
						<text>门店电话</text>
						<text class="keepTextSty">:</text>
						<text style="color: #00b359;" @click="make(shopKeepObj.phone)">{{shopKeepObj.phone}}</text>
					</view>
					<view class="shopkeepSty">
						<text>商家资质</text>
						<text class="keepTextSty">:</text>
						<text style="color: #00b359;">待上传</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 自定义遮罩层 -->
		<view class="popup_box" v-if="drawerStatus" @click="closeDrawer"></view>
		<view class="popup" v-if="drawerStatus">
			<view class="popup_top"><text>折扣已减13.4元</text></view>
			<view class="popup_check">
				<view class="check_box">
					<van-checkbox :value="allChecked" checked-color="#00b359" @change="allCheck"></van-checkbox>
					<text>全选</text>
					<text class="radio_text">(已选2件)</text>
				</view>
			</view>
			<view class="popup_data">
				<scroll-view scroll-y="true" :style="{ height: shopCartList.length * 86 + 26 + 'px' }">
					<view class="popup_list" v-for="(item, idx) in shopCartList" :key="idx">
						<van-checkbox :value="item.shopCheckStatus" checked-color="#00b359" @change="listCheck(idx, item.id)"></van-checkbox>
						<view class="popup_deils">
							<view class="deils_img"><image src="/static/uni.png" mode=""></image></view>
							<view class="con_box_content_shopname">
								<text class="uni-lastmsg">{{ item.text }}</text>
								<view class="content_bot_pic">
									<text class="pic_icon">￥</text>
									<text class="content_bot_nowpic">{{ item.pic }}</text>
									<uni-tag :text="item.yuanj" type="default" inverted="true" disabled="true">￥</uni-tag>
									<view class="counter">
										<van-stepper
											:value="item.counters"
											max="99"
											@change="onchange"
											@plus="add(idx)"
											@minus="minus(idx)"
											@overlimit="overlimit(item.counters)"
										></van-stepper>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusHeight: null,
			tagSty: 0,
			shopCationSty: 0,
			cationList: [],
			drawerStatus: false,
			counter: null,
			// 全选
			allChecked: true,
			// 单选判断数组
			itemCheck: [],
			// 总和
			shopSum: null,
			deils: {
				id: 1,
				status: false,
				icon: '/static/uni.png',
				yfname: '益丰大药房',
				address: '陆家嘴店',
				pingf: '4.9',
				moushuo: 500,
				qisong: 20,
				juli: 600,
				time: 40
			},
			tag: [
				{
					id: 0,
					tags: '商品'
				},
				{
					id: 1,
					tags: '评价'
				},
				{
					id: 2,
					tags: '店家'
				}
			],
			bannerlist: [
				{
					text: 'A'
				},
				{
					text: 'B'
				},
				{
					text: 'C'
				}
			],
			shopCartList: [],
			shopCation: [
				{
					id: 0,
					text: '胃肠道药',
					cationLists: [
						{
							id: 0,
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍...',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							id: 1,
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍1',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8,
							yuanj: '38.9'
						},
						{
							id: 2,
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍2',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						}
					]
				},
				{
					id: 1,
					text: '健康用品',
					cationLists: [
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						},
						{
							icon: '/static/uni.png',
							text: '药品名称介绍药品名称介绍药品名称介绍',
							moushuo: 2,
							goodp: '100%',
							pic: 12.8
						}
					]
				},
				{
					id: 2,
					text: '常备小件'
				},
				{
					id: 3,
					text: '特殊护理'
				},
				{
					id: 4,
					text: '其他器械'
				},
				{
					id: 5,
					text: '消毒用品'
				},
				{
					id: 6,
					text: '保健按摩'
				},
				{
					id: 7,
					text: '辅助器械'
				},
				{
					id: 8,
					text: '呼吸用品'
				}
			],
			eveaTaglist: [
				{
					text: '全部2.5万'
				},
				{
					text: '好评2.3万'
				},
				{
					text: '中评2975'
				},
				{
					text: '差评25'
				}
			],
			evealSty: 0,
			evealist: [
				{
					headport: '/static/uni.png',
					phone: '186****9878',
					time: '201.09.18',
					eveal: '价格便宜，促销优惠力度大，商品质量有保障',
					evealimglist: [
						{
							evealimg: '/static/uni.png'
						},
						{
							evealimg: '/static/uni.png'
						},
						{
							evealimg: '/static/uni.png'
						},
						{
							evealimg: '/static/uni.png'
						},
						{
							evealimg: '/static/uni.png'
						},
						{
							evealimg: '/static/uni.png'
						}
					]
				}
			],
			shopKeepObj: {
				address: '浦东新区商城路518号国大药房商圈北路品（距您1.88km）',
				phone:'0218748532',
			}
		};
	},
	watch: {},
	created() {
		this.cationList = this.shopCation[this.shopCationSty].cationLists;
	},
	onload() {
		this.getStatusHeight();
		this.cationList = this.shopCation[this.shopCationSty].cationLists;
		console.log(this.cationList);
	},
	onReady() {
		this.getStatusHeight();
	},
	watch: {},
	methods: {
		getStatusHeight() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res.statusBarHeight);
					that.statusHeight = res.statusBarHeight;
				}
			});
		},
		tagClick(id) {
			this.tagSty = id;
		},
		//
		tapShopCation(item) {
			this.shopCationSty = item.id;
			this.cationList = item.cationLists;
			// console.log(this.cationList);
		},
		// 打开弹出层
		openPopup() {
			if (this.shopCartList.length == 0) {
				this.drawerStatus = false;
				uni.showToast({
					title: '未添加商品 ！',
					duration: 2000,
					icon: 'none'
				});
			} else {
				this.drawerStatus = !this.drawerStatus;
			}
		},
		// 关闭弹出层
		closeDrawer() {
			this.drawerStatus = false;
		},
		// 添加购物车
		addShopCart(itm) {
			// console.log(itm)
			itm.counters = 1;
			itm.shopCheckStatus = true;
			this.shopCartList.push(itm);
			// console.log(this.listhandle(this.shopCartList),"数组处理")
			this.shopCartList = this.listhandle(this.shopCartList);
			this.shopSum = this.shopCartList.reduce((sum, e) => sum + e.pic * e.counters, 0);
		},
		// 数组处理
		listhandle(arr) {
			if (!Array.isArray(arr)) {
				console.log('type error');
				return;
			}
			let list = [];
			for (var i = 0; i < arr.length; i++) {
				if (!list.includes(arr[i])) {
					list.push(arr[i]);
				}
			}
			return list;
		},
		// 计数器
		onchange(e) {
			this.counter = e.detail;
		},
		add(idx) {
			this.shopCartList[idx].counters = this.counter;
			this.shopSum = this.shopCartList.reduce((sum, e) => sum + e.pic * e.counters, 0);
		},
		minus(idx) {
			this.shopCartList[idx].counters = this.counter;
			// this.shopSum = this.shopCartList.reduce((sum,e)=>sum+e.pic*e.counters,0)
		},
		overlimit(count) {
			if (count == 1) {
				uni.showToast({
					title: '已经是最后一个了',
					icon: 'none'
				});
			} else if (count == 99) {
				uni.showToast({
					title: '已经添加到最多了',
					icon: 'none'
				});
			}
		},
		// 全选
		allCheck() {
			if (this.allChecked == true) {
				this.shopCartList.forEach((item, index) => {
					item.shopCheckStatus = false;
				});
			} else {
				this.shopCartList.forEach((item, index) => {
					item.shopCheckStatus = true;
				});
			}
			this.allChecked = !this.allChecked;
		},
		// 单选
		listCheck(idx, itemId) {
			var list = this.shopCartList;
			console.log(this.itemCheck.length, '1111');
			this.itemcheckFun(list[idx].shopCheckStatus, itemId);
			this.allChecked = this.itemCheck.length == 0 ? true : false;
			list[idx].shopCheckStatus = !list[idx].shopCheckStatus;
			this.$forceUpdate(this.shopCartList, this.shopCartList[idx], list[idx]);
		},
		// 选项处理
		itemcheckFun(statu, id) {
			let obj = {};
			obj.id = id;
			obj.status = statu;
			if (this.itemCheck.length == 0) {
				this.itemCheck.push(obj);
			} else {
				this.itemCheck.forEach((item, index) => {
					if (item.id === id) {
						this.itemCheck.splice(index, 1);
					}
				});
			}
		},
		// 评价tag
		evealClick(idx) {
			this.evealSty = idx;
		},
		// 复制地址
		copy(value) {
			uni.setClipboardData({
				data: value,
				success: res => {
					uni.showToast({
						title: '复制成功',
						icon:"none"
					});
				}
			});
		},
		// 拨打电话
		make(phone){
			uni.makePhoneCall({
				phoneNumber:phone,
				success: (res) => {
					console.log("调用成功")
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.nav_tab {
	display: flex;
	align-deilss: center;
	line-height: 80rpx;
	background-color: #00b359;
	justify-content: space-between;
}
.nav_tab_icon {
	margin-right: 206rpx;
	/deep/ .uni-icons {
		margin-right: 16px;
	}
}
.shop_body {
	margin-top: 124rpx;
}
.shop_con_shopdeils {
	background-color: #00b359;
	height: 180rpx;
	padding: 15px 15px 0px 15px;
	position: relative;
	.con_shopdeils {
		width: 92%;
		position: absolute;
		background-color: #ffffff;
		border-radius: 10px;
		box-shadow: 0px 0px 33px 0px rgba(59, 67, 83, 0.06);
		.con_shopdeils_box {
			display: flex;
			padding: 15px 15px 0px 15px;
		}
		.con_deils_img {
			image {
				width: 110rpx;
				height: 110rpx;
			}
		}
		.con_deils_shopname {
			margin-left: 10px;
			.con_address_text {
				margin-left: 20rpx;
				letter-spacing: 3rpx;
				line-height: 25px;
			}
		}
	}
}
.shop_contion {
	position: relative;
}
.shop_text {
	font-size: 22rpx;
	color: #666666;
	margin-right: 10rpx;
	opacity: 0.75;
	line-height: 30px;
}
.shop_tag {
	padding: 17px 15px 13px 15px;
	.tag_box {
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		padding: 0px 5px;
		.tag_text {
			margin-right: 64rpx;
			padding: 5px 0px;
		}
	}
}
.shop_banner {
	border: 1px solid #c0c0c0;
	border-radius: 10px;
	uni-swiper {
		height: 200rpx;
	}
}
.tag_sty {
	border-bottom: 2px solid #00b359;
	color: #00b359;
}
.seize_box {
	height: 8vh;
}
.shop_station {
	height: 23vh;
}
.shop_scroll {
	display: flex;
	justify-content: space-between;
	.scroll_title {
		width: 30% !important;
	}
	ul {
		padding: 0px;
		width: 100%;
		background-color: #f9faf9;
		li {
			list-style: none;
			padding: 14px 0rpx;
			height: 50rpx;
		}
		.scroll_li_text {
			padding-left: 15px;
			font-size: 28rpx;
			line-height: 44rpx;
		}
	}
	.scroll_text_con {
		// width: 79% !important;
	}
	.shop_scroll_con {
		padding: 0px 10px;
		position: relative;
		.scrool_con_title {
			height: 95rpx;
			text-align: right;
			text {
				line-height: 55px;
				font-size: 14px;
				color: #666666;
				margin-left: 30rpx;
			}
		}
		.scroll_con_box {
			display: flex;
			margin-bottom: 18rpx;
			.con_box_img {
				padding: 5px 4px;
				margin-right: 10rpx;
				image {
					height: 140rpx;
					width: 160rpx;
				}
			}
			.con_box_content {
				.con_box_content_shopname {
					font-size: 14px;
					color: #333333;
				}
				.con_box_content_deils {
					display: flex;
					.content_bot_pic {
						.content_bot_nowpic {
							font-size: 16px;
							color: #ff5f42;
							letter-spacing: 0;
							font-weight: 400;
							margin-right: 5px;
						}
						.pic_icon {
							font-size: 26rpx;
							color: #ff5f42;
						}
						/deep/ .uni-tag {
							border: 1px solid;
							padding: 0px !important;
							line-height: 0px !important;
							font-size: 26rpx;
						}
					}
					.add_icon {
						position: relative;
						top: 24rpx;
						left: 103rpx;
						image {
							width: 54rpx;
							height: 54rpx;
						}
					}
				}
			}
		}
	}
	/deep/ .uni-scroll-view-content {
		display: flex;
	}
}
.shop_cart {
	height: 6vh;
	width: 92%;
	position: fixed;
	bottom: 0%;
	z-index: 100;
	box-shadow: 0px 0px 33px 0px rgba(59, 67, 83, 0.05);
	padding: 5px 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.shop_cart_left {
		display: flex;
		align-items: center;
		.shop_crat_icon {
			border: 2rpx solid;
			width: 80rpx;
			height: 70rpx;
			margin-right: 36rpx;
		}
		.shop_crat_text {
			font-size: 26rpx;
			color: #c0c0c0;
		}
	}
	.shop_cart_btn {
	}
	/deep/ button {
		padding: 9px 31px !important;
		line-height: 44rpx !important;
		border-radius: 20rpx;
	}
}
.li_sty {
	background-color: #ffffff;
}
.li_text_sty {
	border-left: 2px solid #00b359;
	color: #00b359;
}
.uni-lastmsg {
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}
// 遮罩层
.popup_box {
	position: absolute;
	width: 100%;
	height: 93%;
	top: 0;
	left: 0;
	background-color: #000000;
	z-index: 15;
	opacity: 0.4;
}
.popup {
	position: fixed;

	width: 92%;
	bottom: 7%;
	left: 0;
	z-index: 20;
	background-color: #f9faf9;
	padding: 0px 30rpx;

	.popup_top {
		height: 60rpx;
		background-color: #f9faf9;
		text-align: center;
		font-size: 26rpx;
		color: #333333;
		line-height: 60rpx;
	}
	.popup_check {
		.check_box {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			// border: 1px solid;
			label {
				margin-right: 10px;
			}

			.radio_text {
				font-weight: 500;
				font-size: 26rpx;
				color: #c0c0c0;
				margin-left: 10rpx;
			}
		}
	}
}
// 动画
// 打开动画
.open {
	animation: popupopen 1s;
	@keyframes popupopen {
		from {
			height: 0px;
		}
		to {
			height: 580rpx;
		}
	}
}
.close {
	animation: popupoclose 1s;
	@keyframes popupoclose {
		from {
			height: 580px;
		}
		to {
			height: 0rpx;
		}
	}
}
.popup_list {
	display: flex;
	align-items: center;
	margin-top: 52rpx;
}
.popup_data {
	.popup_deils {
		display: flex;

		.deils_img {
			padding: 3px 2px;
			margin-right: 20rpx;
			image {
				height: 140rpx;
				width: 152rpx;
			}
		}
		.content_bot_pic {
			margin-top: 16px;
			color: #ff5f42;
			font-weight: 500;
			display: flex;
			justify-content: space-between;
		}
		.content_bot_nowpic {
			margin-right: 10px;
		}
		/deep/ .uni-tag {
			border: 1px solid;
			padding: 0px !important;
			line-height: 0px !important;
			font-size: 26rpx;
		}
	}
	.counter {
		display: flex;
		.sty {
			text-align: center;
			color: #333333;
			font-size: 28rpx;
			font-weight: 500;
		}
		.reduce {
			width: 40rpx;
			height: 40rpx;
		}
		.amount {
			width: 76rpx;
			height: 40rpx;
			background-color: #f9faf9;
			border-radius: 5px;
		}
	}
}
// 评价
.shop_evealuate {
	padding: 0px 30rpx;
	background-color: #ffff;
	box-shadow: 0px 0px 33px 0px rgba(59, 67, 83, 0.05);
	border-radius: 20rpx;
	.evealuate {
		// padding: ;
	}
	.evealuate_top {
		display: flex;
		align-items: center;
		margin-bottom: 34rpx;
		.evealuate_fraction {
			font-size: 70rpx;
			color: #ff5f42;
			letter-spacing: 0.1rpx;
			font-weight: 500;
			margin-right: 10px;
		}
		.evealuate_icon {
			p {
				font-size: 24rpx;
				color: #999999;
				font-weight: 500;
			}
		}
	}
	.evealuate_tag {
		display: flex;
		justify-content: space-between;
		/deep/ .uni-tag {
			width: 140rpx;
			text-align: center;
			font-size: 24rpx;
			padding: 0px;
			line-height: 52rpx;
			border-radius: 20rpx;
		}
	}
	.evealuate_con {
		margin-top: 52rpx;
		// border: 1px solid;
		height: 40vh;
		border-radius: 20rpx;
		.eveal_con_top {
			display: flex;
			justify-content: space-between;
			.eveal_con {
				display: flex;
				align-items: center;
				.eveal_headImg {
					margin-right: 20rpx;
					image {
						width: 70rpx;
						height: 70rpx;
					}
				}
				.eveal_con_text {
					text {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
			.eveal_time {
				font-size: 26rpx;
				color: #999999;
				font-weight: 500;
			}
		}
		.evealuate_con_cotion {
			margin: 16px 0px 15px 0px;
			font-size: 14px;
			color: #333333;
		}
	}
	.evealuate_img_box {
		.img_box {
			margin-right: 20rpx;
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
			}
		}
	}
}
.shop_shopkeeper {
	padding: 0px 30rpx;
	background: #ffffff;
	.shopkeeper {
		padding: 17px 15px 19px 15px;
		box-shadow: 0px 0px 33px 0px rgba(59, 67, 83, 0.06);
		border-radius: 20rpx;
		.shopkeep_head {
			font-size: 28rpx;
			color: #333333;
			font-weight: 550;
			margin-bottom: 24rpx;
		}
		.shopkeepSty {
			font-size: 28rpx;
			color: #666666;
			font-weight: 500;
			margin-bottom: 24rpx;
		}
		.keepTextSty {
			margin-right: 20rpx;
			margin-left: 5px;
		}
	}
}
</style>
